﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="ticTacToe.Models" %>
 <asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
    TicTacToe
</asp:Content>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <div id="content">
    	
        <section id="logoContainer"><a href="/home/index"><img id="logo" title="logo image" height="50" width="200px" src="/content/images/logo.png" /></a></section>
        <section class="column" id="quotes">
           <%var m = (GameModel)ViewData["Model"];%>
           
           <div class="author">
                <table id="mf-gameboard" class="mf-board">
                    <tr class="row1">
                        <td id="0" class="col1 dia0">E</td>
                        <td id="1" class="col2">E</td>
                        <td id="2" class="col3 dia2">E</td>
                    </tr>
                    <tr class="row2">
                        <td id="3" class="col1">E</td>
                        <td id="4" class="col2 dia0 dia2">E</td>
                        <td id="5" class="col3">E</td>
                    </tr>
                    <tr class="row3">
                        <td id="6" class="col1 dia2">E</td>
                        <td id="7" class="col2">E</td>
                        <td id="8" class="col3 dia0">E</td>
                    </tr>
                </table>
            </div>
            <div class="topic">
                <%=m.player1 %> as <%=m.player1Mark %><br/>
                <%=m.player2 %> as <%=m.player2Mark %><br/>
                <span id="next_move"><%=m.nextMove%></span>´s turn.
           
           </div>
            <div></div>
           
        </section>
        <section id="footer">© Misfitz. inc 2011 | <a href="../home/">new game</a> | <a href="#" id="restartbtn">restart game</a></section>
    </div>
<form name="reset" id="reset" >
    <input type="hidden" name="gameid" id="gameid" value="<%=m.gameId%>"/>        <!--So we can retrieve the right game when we get back to the server-->
    <input type="hidden" name="mark" id="mark" value="<%=m.nextMove %>"/>  <!--So ve know what to mark in the <td> when clicked, -->
    <input type="hidden" name="gametype" id="gametype" value="<%=m.gameType %>" />
    <input type="hidden" name="player1" id="player1" value="<%=m.player1 %>" />
    <input type="hidden" name="player2" id="player2" value="<%=m.player2 %>" />
    <input type="hidden" name="diff" value="<%=m.difficulty %>" />

</form>
<script type="text/javascript">
    //bind to clickin a table element
    $('.mf-board td').bind('click', function () {
        var mark = $('#mark').val();
        var gameId = $('#gameid').val();
        var squareClicked = $(this).attr('id');
        if ($(this).html() == 'E') {
            $(this).html(mark).addClass("showletter");
            //do Ajax to controller check()
            var url = "check?square=" + squareClicked + "&mark=" + mark + "&gameId=" + gameId;
            $.ajax({
                url: url,
                type: 'POST',
                success: function (data) {
                    //check if the recieved board is the same as the gui board, then update gui 
                    //should only happen when playing against the computer
                    if (data.board != null) {
                        for (i = 0; i < 9; i++) {
                            var gui = $('[id="' + i + '"]').html();
                            if (data.board[i] != gui) {
                                $('[id="' + i + '"]').html(data.board[i]).addClass('showletter');
                            }
                        }
                    }
                    if (data.message != "Error" && data.winningRow == null) {
                        $('#mark').val(data.nextMove);
                        $('#next_move').html(data.nextMove);
                    }
                    else if (data.message == "Error") {
                        $('#next_move').html("Oooops...an error. Nobody");
                        $('.mf-board td').unbind('click')
                        for (i = 0; i < 9; i++) {
                            $('[id="' + i + '"]').html('E').addClass('showletter');
                        }
                    }
                    else if (data.message == "Game was a draw") {
                        $('#next_move').html(data.message + ". Nobody");
                    }
                    else if (data.message == "Winner") {
                        var arrPos = (data.winningRow).split(";");
                        var wMark = (arrPos[1]).substr(0, 1);
                        var sel = "." + arrPos[2];
                        //select the winning row
                        $(sel).attr("style", "background-color:green !important; text-decoration:line-through !important;");
                        $('#next_move').html(wMark + " has won!!!!     Nobody");
                        $('.mf-board td').unbind('click')
                        var asdf = "";
                    }

                }
            });
        }
    })
    //update the table according to string
    $('#restartbtn').click(function () {

        var form = $("form#reset").serialize();
        var url = "../Home/restart?"
        //alert(url + form);
        $(this).attr('href', url + form);
        //alert($(this).attr('href'));
        return true;
    })
    



</script>
</asp:Content>

